let User_information = [];
//选项切换
let login1Ele = document.querySelector(".login1");
let navEle = document.querySelector(".nav");
let btnEle = document.querySelectorAll(".nav>div");
let divEle = document.querySelectorAll("#main>div");
let areaEle = document.querySelectorAll(".area");
//登录块
let loginEle = document.querySelector("#login");
//遮罩
let coverEle = document.querySelector("#cover_mask");
//登录取消按钮
let cancelEle = document.querySelector("#login button");
//登录按钮
let logininputEle = document.querySelectorAll("#login input");
let logindata = [btnEle[1], btnEle[2], login1Ele];
// console.log($(".nav>div").eq(0).nextAll())
// ($("#header a:first"), $(".nav>div").eq(0).nextAll()).mouseenter(function () {
// 	console.log("点击了!");
// })
//广告滚动
setInterval(function () {
  let dis = $(".notice p").css("left");
  // console.log(dis);
  dis = parseInt(dis) - 1;
  if (dis < -880) {
    dis = 980;
  }
  $(".notice p").css("left", `${dis}px`);
}, 20);
//显示区服
$(".area").change(function () {
  var index = $(".area").index(this);
  $.post(
    "php/index.php",
    {
      //传入信息
      area_name: `${this.value}`,
    },
    function (data) {
      if (index == 0) {
        let opele = areaEle[index].nextElementSibling;
        // console.log(opele);
        render(data, opele);
      } else {
        let opele =
          areaEle[index].nextSibling.nextElementSibling.nextElementSibling;
        // console.log(opele);
        render(data, opele);
      }
    },
    "json"
  );
});
myfn();
//判断是否登录函数
function myfn() {
  // console.log(tdEle);
  if (User_information[0] != null) {
    $("body,html").css("overflow", "auto");
    logindata.forEach((item) => {
      item.onclick = function () {
        return false;
      };
    });
    //选项切换
    $(".nav>div").click(function () {
      $(this)
        .attr("class", "activebtn")
        .siblings()
        .removeAttr("class", "activebtn");
      var index = $(".nav>div").index(this);
      $("#main>div")
        .eq(index)
        .attr("class", "activediv")
        .siblings()
        .removeAttr("class", "activediv");
    });
  } else {
    logindata.forEach((item) => {
      item.onclick = function (e) {
        e.preventDefault();
        // console.log(User_information);
        loginEle.style.display = "block";
        coverEle.style.display = "block";
        //禁止页面滚动
        $("html,body").scrollTop(0);
        $("body,html").css("overflow", "hidden");
      };
    });
  }
}
//点击取消登录
cancelEle.onclick = function () {
  loginEle.style.display = "none";
  coverEle.style.display = "none";
  $("body,html").css("overflow", "auto");
};
//点击登录
// console.log(logininputEle);
logininputEle[2].onclick = function () {
  // console.log(logininputEle[0].value, logininputEle[1].value);
  if (logininputEle[0].value != 0) {
    $.post(
      "php/index.php",
      {
        //传入信息
        user_id: `${logininputEle[0].value}`,
        password: `${logininputEle[1].value}`,
      },
      function (data) {
        if (data) {
          //返回接受信息
          User_information[0] = data.id;
          User_information[1] = data.user_id;
          User_information[2] = data.user_name;
          User_information[3] = data.user_email;
          sellInEle[2].value = data.user_email; //发布模块联系方式
          loginEle.style.display = "none";
          coverEle.style.display = "none";
          myfn();
          login1Ele.innerHTML = `昵称:${User_information[2]}`;
          Prerender();
        } else {
          alert("用户名或密码错误,请重新登录!");
        }
      },
      "json"
    );
  }
};
// Prerender()
// // 个人中心数据渲染
function Prerender() {
  //渲染个人中心
  let pre_rigrht_ul1Ele = document.querySelector(".pre_right_ul1");
  let pre_rigrht_tbEle = document.querySelector(".pre_right_tb");
  let pre_rigrht_tb2Ele = document.querySelector(".pre_right_tb2");
  let pre_rigrht_tb3Ele = document.querySelector(".pre_right_tb3");
  $(".td1").html(`${User_information[2]}`);
  $(".td2").html(`${User_information[3]}`);
  //个人信息修改
  console.log($("#myinfo>table button"));
  console.log($("#myinfo>p"));
  console.log($("#myinfo>p>button"));
  //修改框显示
  $("#myinfo>table button").click(function () {
    var pindex = $("#myinfo>table button").index(this);
    // console.log(pindex);
    $("#myinfo>p").eq(pindex).css("display", "block");
    coverEle.style.display = "block"; //遮罩层
    //禁止页面滚动
    $("html,body").scrollTop(0);
    $("body,html").css("overflow", "hidden");
  });
  //修改框隐藏
  $("#myinfo>p>button").click(function () {
    $("#myinfo>p").eq($("#myinfo>p>button").index(this)).css("display", "none");
    coverEle.style.display = "none"; //遮罩层
    $("body,html").css("overflow", "auto");
  });
  //查看发布的信息
  $.post(
    "php/index.php",
    {
      //传入信息
      pre: true,
      u_id: `${User_information[1]}`,
    },
    function (data) {
      pre_rigrht_tbEle.innerHTML = "";
      data.forEach((item, index) => {
        var trEle = document.createElement("tr");
        trEle.innerHTML = `<td>${item.server_name}</td> <td>${item.title}</td> <td>${item.price}</td> <td>${item.contace}</td> <td>${item.nowtime}</td><td><button>下架</button></td>`;
        pre_rigrht_tbEle.appendChild(trEle);
      });
    },
    "json"
  );
  //渲染买家信息
  $.post(
    "php/index.php",
    {
      //传入信息
      buy: true,
      u_id: `${User_information[1]}`,
    },
    function (data) {
      pre_rigrht_tb2Ele.innerHTML = "";
      data.forEach((item, index) => {
        var trEle = document.createElement("tr");
        trEle.innerHTML = `<td>${item.server_name}</td> <td>${item.title}</td> <td>${item.price}</td> <td>${item.c_contace}</td> <td>${item.nowtime}</td><td><button>删除记录</button></td>`;
        pre_rigrht_tb2Ele.appendChild(trEle);
      });
    },
    "json"
  );
  // //渲染卖家信息
  $.post(
    "php/index.php",
    {
      sell: true,
      u_id: `${User_information[1]}`,
    },
    function (data) {
      pre_rigrht_tb3Ele.innerHTML = "";
      data.forEach((item, index) => {
        var trEle = document.createElement("tr");
        trEle.innerHTML = `<td>${item.server_name}</td> <td>${item.title}</td> <td>${item.price}</td> <td>${item.u_contace}</td> <td>${item.nowtime}</td><td><button>删除记录</button></td>`;
        pre_rigrht_tb3Ele.appendChild(trEle);
      });
    },
    "json"
  );
}
//个人中心选项切换
$(".pre_left>span").click(function () {
  $(this).css("opacity", "1").siblings().css("opacity", "0.5");
  // $(this).siblings().css("opacity", "0.5");
  var index = $(".pre_left>span").index(this);
  $(".pre_right>div")
    .eq(index)
    .css("display", "block")
    .siblings()
    .css("display", "none");
  // $(".pre_right>div").eq(index).siblings().css("display", "none");
});
//信息发布模块
let sellSeEle = document.querySelectorAll("#sell_div>select");
let sellInEle = document.querySelectorAll("#sell_div>input");
// console.log(sellSeEle, sellInEle);
sellInEle[3].onclick = function () {
  if (sellInEle[0].value && sellInEle[1].value && sellInEle[2].value != null) {
    $.post(
      "php/index.php",
      {
        server_name: `${sellSeEle[1].value}`,
        type: `${sellSeEle[2].value}`,
        title: `${sellInEle[0].value}`,
        price: `${sellInEle[1].value}`,
        contace: `${sellInEle[2].value}`,
        u_id: `${User_information[1]}`,
        user_name: `${User_information[2]}`,
      },
      function (data) {
        if (data.status == 1) {
          sellInEle[0].value = "";
          sellInEle[1].value = "";
          createPage();
          Prerender(data);
          alert("发布成功");
        } else {
          alert("内容不能为空,请补全发布");
        }
      },
      "json"
    );
  }
};
//渲染函数
function render(data, ulele) {
  // console.log(data);
  ulele.innerHTML = "";
  data.forEach(function (item) {
    let opEle = document.createElement("option");
    // liEle.className = "news";
    opEle.innerHTML = `${item.server_name}`;
    ulele.appendChild(opEle);
  });
}
let count = 12;
// 页面加载渲染
createPage();
function createPage() {
  $.post(
    "php/index.php",
    {
      cmd: true,
    },
    function (data) {
      var newdata1 = [];
      for (var k = 0; k < count; k++) {
        newdata1.push(data[k]);
      }
      renderdom(newdata1);
      //分页渲染
      var p = Math.ceil(data.length / count);
      var paginationEle = document.querySelector(".pagination");
      paginationEle.innerHTML = `
				<a href="javascript:;" class="prev">⌜</a>
				<a href="javascript:;" class="next">⌝</a>`;
      var nextEle = document.querySelector(".next");
      for (var i = 1; i <= p; i++) {
        var a = document.createElement("a");
        a.href = "javascript:;";
        a.innerHTML = i;
        paginationEle.insertBefore(a, nextEle);
        a.onclick = function () {
          this.style.background = "skyblue";
          $(this).siblings().css("background", "none");
          let page = this.innerHTML;
          let newdata = [];
          for (
            var j = (page - 1) * count;
            j < (page - 1) * count + count;
            j++
          ) {
            if (data[j]) {
              //去掉非数据
              newdata.push(data[j]);
            }
          }
          renderdom(newdata);
        };
      }
    },
    "json"
  );
}
function renderdom(data) {
  let tbodyEle = document.querySelector("#buy tbody");
  tbodyEle.innerHTML = "";
  data.forEach(function (item, index) {
    var trEle = document.createElement("tr");
    // liEle.className = "news";
    trEle.innerHTML = `
						<th>${item.server_name}</th>
						<td>${item.type}</td>
						<td>${item.title}</td>
						<td>${item.price}</td>
						<td>${item.user_name}</td>
						<td class="look"><button>购买</button></td>
						<td>${item.nowtime}</td>
						`;
    tbodyEle.appendChild(trEle);
    var tdEle = document.querySelectorAll(".look");
    // console.log(tdEle);
    tdEle[index].onclick = function () {
      if (User_information[0] != null) {
        //发送联系方式给卖家并查看
        var calllist = window.confirm(
          "确定发送你的联系方式并查看该联系方式吗?"
        );
        // console.log(calllist);
        if (calllist != false) {
          tdEle[index].innerHTML = `${item.contace}`;
          $.post(
            "php/index.php",
            {
              call: "true",
              u_id: `${item.u_id}`,
              u_contace: `${item.contace}`,
              c_contace: `${User_information[3]}`,
              c_id: `${User_information[1]}`,
              l_id: `${item.id}`,
            },
            function (data) {},
            "json"
          );
          Prerender();
        }
      } else {
        loginEle.style.display = "block";
        coverEle.style.display = "block";
      }
    };
  });
}
